<template>
  <div v-show="visible" class="context-menu" :style="positionStyle" @click.stop>
    <div class="context-menu-item" @click="emit('copy')">复制行</div>
    <!-- <div class="context-menu-item" @click="emit('copy-clipboard')">复制到剪贴板</div> -->
    <div class="context-menu-item" @click="emit('delete')">删除行</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Position {
  x: number
  y: number
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  position: {
    type: Object as () => Position,
    required: true
  }
})

const emit = defineEmits(['copy', 'copy-clipboard', 'delete'])

const positionStyle = computed(() => ({
  left: `${props.position.x}px`,
  top: `${props.position.y}px`
}))
</script>

<style scoped>
/* 保留原有样式 */
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 5px 0;
  z-index: 9999;
}

.context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.context-menu-item:hover {
  background-color: #f5f7fa;
}
</style>
